<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('设备统计')" />

</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 select-table table-striped">
            <div class="col-sm-6" id="valveType" style="height:400px;border:1px solid lightgrey;background:#e5e3dc;">
            </div>
            <div class="col-sm-6" id="valveData" style="height:400px;border:1px solid lightgrey;background:#e5e3dc;">
            </div>
            <div class="col-sm-6" id="calorType" style="height:400px;border:1px solid lightgrey;background:#e5e3dc;">
            </div>
            <div class="col-sm-6" id="calorData" style="height:400px;border:1px solid lightgrey;background:#e5e3dc;">
            </div>
            <div class="col-sm-6" id="centraType" style="height:400px;border:1px solid lightgrey;background:#e5e3dc;">
            </div>
            <div class="col-sm-6" id="centraData" style="height:400px;border:1px solid lightgrey;background:#e5e3dc;">
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
    var prefix = ctx + "report/equipment";

    $(function() {
        getValveType();
        getValveData();
        getCalorType();
        getCalorData();
        getCentraType();
        getCentraData();
    });

    function getValveType(){
        var pieChart = echarts.init(document.getElementById('valveType'));
        var datas=[];
        pieChart.showLoading();//加载动画

        $.ajax({
            url: prefix + '/valveTypeSummary',
            async: true,
            type: "POST",
            dataType: "json",
            success: function (json) {
                for (var i = 0; i < json.data.length; i++) {
                    datas.push({name: json.data[i].typeName, value: json.data[i].count});
                }
                pieChart.hideLoading();//隐藏加载动画
                pieChart.setOption({
                    title : [{
                        text: '统计阀门类型'
                    },{
                        show: datas.length > 0 ? false : true,
                        subtext: '暂无数据',
                        subtextStyle: {
                            color:'#bbb',
                            fontWeight:350,
                            fontSize: 25
                        },
                        left:'40%',
                        top: '40%'
                    }],
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend : {
                        orient: 'vertical',
                        right:'right',
                        data: datas
                    },
                    series: [{
                        name: '统计阀门类型',
                        type: 'pie',
                        radius: '50%',
                        data: datas,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(30, 144, 255,0.5)'
                            }
                        }
                    }]
                });
            }
        });
    }

    function getValveData(){
        var pieChart = echarts.init(document.getElementById('valveData'));
        var datas=[];
        pieChart.showLoading();//加载动画

        $.ajax({
            url: prefix + '/valveDataSummary',
            async: true,
            type: "POST",
            dataType: "json",
            success: function (json) {
                for (var i = 0; i < json.data.length; i++) {
                    datas.push({name: json.data[i].typeName, value: json.data[i].count});
                }
                pieChart.hideLoading();//隐藏加载动画
                pieChart.setOption({
                    title : [{
                        text: '阀门登记情况'
                    },{
                        show: datas.length > 0 ? false : true,
                        subtext: '暂无数据',
                        subtextStyle: {
                            color:'#bbb',
                            fontWeight:350,
                            fontSize: 25
                        },
                        left:'40%',
                        top: '40%'
                    }],
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend : {
                        orient: 'vertical',
                        right:'right',
                        data: datas
                    },
                    series: [{
                        name: '阀门登记情况',
                        type: 'pie',
                        radius: '50%',
                        data: datas,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(30, 144, 255,0.5)'
                            }
                        }
                    }]
                });
            }
        });
    }

    function getCalorType(){
        var pieChart = echarts.init(document.getElementById('calorType'));
        var datas=[];
        pieChart.showLoading();//加载动画

        $.ajax({
            url: prefix + '/calorTypeSummary',
            async: true,
            type: "POST",
            dataType: "json",
            success: function (json) {
                for (var i = 0; i < json.data.length; i++) {
                    datas.push({name: json.data[i].typeName, value: json.data[i].count});
                }
                pieChart.hideLoading();//隐藏加载动画
                pieChart.setOption({
                    title : [{
                        text: '统计热表类型'
                    },{
                        show: datas.length > 0 ? false : true,
                        subtext: '暂无数据',
                        subtextStyle: {
                            color:'#bbb',
                            fontWeight:350,
                            fontSize: 25
                        },
                        left:'40%',
                        top: '40%'
                    }],
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend : {
                        orient: 'vertical',
                        right:'right',
                        data: datas
                    },
                    series: [{
                        name: '统计热表类型',
                        type: 'pie',
                        radius: '50%',
                        data: datas,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(30, 144, 255,0.5)'
                            }
                        }
                    }]
                });
            }
        });
    }

    function getCalorData(){
        var pieChart = echarts.init(document.getElementById('calorData'));
        var datas=[];
        pieChart.showLoading();//加载动画

        $.ajax({
            url: prefix + '/calorDataSummary',
            async: true,
            type: "POST",
            dataType: "json",
            success: function (json) {
                for (var i = 0; i < json.data.length; i++) {
                    datas.push({name: json.data[i].typeName, value: json.data[i].count});
                }
                pieChart.hideLoading();//隐藏加载动画
                pieChart.setOption({
                    title : [{
                        text: '热表关联情况'
                    },{
                        show: datas.length > 0 ? false : true,
                        subtext: '暂无数据',
                        subtextStyle: {
                            color:'#bbb',
                            fontWeight:350,
                            fontSize: 25
                        },
                        left:'40%',
                        top: '40%'
                    }],
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend : {
                        orient: 'vertical',
                        right:'right',
                        data: datas
                    },
                    series: [{
                        name: '热表关联情况',
                        type: 'pie',
                        radius: '50%',
                        data: datas,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(30, 144, 255,0.5)'
                            }
                        }
                    }]
                });
            }
        });
    }

    function getCentraType(){
        var pieChart = echarts.init(document.getElementById('centraType'));
        var datas=[];
        pieChart.showLoading();//加载动画

        $.ajax({
            url: prefix + '/centraTypeSummary',
            async: true,
            type: "POST",
            dataType: "json",
            success: function (json) {
                for (var i = 0; i < json.data.length; i++) {
                    datas.push({name: json.data[i].typeName, value: json.data[i].count});
                }
                pieChart.hideLoading();//隐藏加载动画
                pieChart.setOption({
                    title : {
                        text: '统计采集器类型'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend : {
                        orient: 'vertical',
                        right:'right',
                        data: datas
                    },
                    series: [{
                        name: '统计采集器类型',
                        type: 'pie',
                        radius: '50%',
                        data: datas,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(30, 144, 255,0.5)'
                            }
                        }
                    }]
                });
            }
        });
    }

    function getCentraData(){
        var pieChart = echarts.init(document.getElementById('centraData'));
        var datas=[];
        pieChart.showLoading();//加载动画

        $.ajax({
            url: prefix + '/centraDataSummary',
            async: true,
            type: "POST",
            dataType: "json",
            success: function (json) {
                for (var i = 0; i < json.data.length; i++) {
                    datas.push({name: json.data[i].typeName, value: json.data[i].count});
                }
                pieChart.hideLoading();//隐藏加载动画
                pieChart.setOption({
                    title : {
                        text: '采集器连线情况'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend : {
                        orient: 'vertical',
                        right:'right',
                        data: datas
                    },
                    series: [{
                        name: '采集器连线情况',
                        type: 'pie',
                        radius: '50%',
                        data: datas,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(30, 144, 255,0.5)'
                            }
                        }
                    }]
                });
            }
        });
    }
</script>
</body>